<template>
  <div style="height: 100%;width: 100%">
      <div class="head">
          <p style="color: #333333;line-height: 26px;font-weight: 500;font-size: 20px">店铺详情</p>
          <p style="color: #666666;line-height: 40px;font-size: 14px;margin-bottom:20px">账户设置</p>
      </div>
      <div class="item clearfix">
          <div class="userName">
            <span style="font-size: 18px;color: #333333;line-height: 34px">头像</span>
          </div>
          <div class="field-value">
              <el-avatar :src="user.headpicture" :size="48" fit="fill" class="headPicture"></el-avatar>
          </div>
          <div>
              <el-button round class="btu">修改</el-button>
          </div>
      </div>
      <div class="item clearfix">
          <div class="userName">
            <span style="font-size: 18px;color: #333333;line-height: 34px">昵称</span>
          </div>
          <div class="field-value">
              <span style="font-size: 12px;color: #666666;line-height: 40px">{{user.username}}</span>
          </div>
          <div>
              <el-button round class="btu">修改</el-button>
          </div>
      </div>
      <div class="item clearfix">
          <div class="userName">
            <span style="font-size: 18px;color: #333333;line-height: 34px">换绑手机</span>
          </div>
          <div class="field-value">
              <span style="font-size: 12px;color: #666666;line-height: 40px">{{user.phone}}</span>
          </div>
          <div>
              <el-button round class="btu">换绑</el-button>
          </div>
      </div>
      <div class="item clearfix">
          <div class="userName">
            <span style="font-size: 18px;color: #333333;line-height: 34px">登录密码</span>
          </div>
          <div class="field-value">
              <span style="font-size: 12px;color: #666666;line-height: 40px">安全强度：{{passPower}}</span>
          </div>
          <div>
              <el-button round class="btu">换绑</el-button>
          </div>
      </div>
  </div>

</template>

<script>
export default {
    data(){
        return{
            user:{},
            passPower:'',
        }
    },
    methods:{
        regex(){
            //密码为八位及以上并且字母数字特殊字符三项都包括
            var strongRegex = new RegExp("^(?=.{6,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
            //密码为八位及以上并且字母、数字、特殊字符三项中有两项，强度是中等
            var mediumRegex = new RegExp("^(?=.{6,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[a-z])(?=.*\\W))|((?=.*[0-9])(?=.*\\W))|((?=.*[A-Z])(?=.*\\W))).*$", "g");
            var enoughRegex = new RegExp("(?=.{6,}).*", "g");
            if(strongRegex.test(this.user.loginPassword)) {
                this.passPower="高"
            } else if (mediumRegex.test(this.user.loginPassword)){
                this.passPower="中"
            } else if(enoughRegex.test(this.user.loginPassword)){
                this.passPower="低"
            }
        }
    },
    created() {
        this.user = JSON.parse(sessionStorage.getItem('users'));
        this.regex();
    }
}
</script>

<style scoped>
.item{
    border-top: 1px solid #E5E5E5;
    padding: 30px 0;
}
.clearfix:after {
    content: " ";
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
}
.userName{
    width: 95px;
    border-right: 1px solid #e5e5e5;
    text-align: right;
    padding-right: 30px;
    float: left;
}
.field-value{
    float: left;
    text-align: right;
    padding-left: 30px;
    height: 40px;
}
.headPicture{
    transform: translateY(-5px);
}
.btu{
    padding: 0;
    font-size: 14px;
    color: #666666;
    float: right;
    height: 40px;
    width: 82px;
    cursor: pointer;
    margin: 0 15px;
    line-height: 40px;
    text-align: center;
    background-color: #ffffff;
}
.btu:hover{
    color: #666666;
    background-color: #fff;
    border: 1px solid #E5E5E5;
}
.btu:focus{
    color: #666666;
    background-color: #fff;
    border: 1px solid #E5E5E5;
}
::v-deep .el-button.is-round{
    padding: 0;
}
</style>



